<template>
  <div class="audio-data-category page-container">
    <div class="bg">
      <div class="module-container">
        <div class="module-header">
          <icon name="file-audio" class="header-icon"></icon>
          <span class="header-title">音频类数据分析系统</span>
          <div class="header-actions">
            <el-button type="primary" size="small" @click="goBack">返回首页</el-button>
            <el-button type="primary" size="small" @click="refreshData">刷新数据</el-button>
          </div>
        </div>
        <div class="module-content">
          <dv-border-box-12 class="content-box">
            <div class="content-wrapper">
              <!-- 上传音频文件区域 -->
              <div class="upload-section">
                <h3 class="section-title">上传音频文件</h3>
                <div class="upload-content">
                  <div class="upload-icon">
                    <icon name="file-audio" class="icon-large"></icon>
                    <div class="upload-text">
                      <p>拖拽音频文件到此处，或点击上传</p>
                      <p class="upload-tip">支持MP3、WAV、FLAC等格式</p>
                    </div>
                  </div>
                  <el-upload
                    class="upload-area"
                    drag
                    action="#"
                    :http-request="handleUpload"
                    :before-upload="beforeUpload"
                    :on-success="handleUploadSuccess"
                    :on-error="handleUploadError"
                    :show-file-list="false"
                    accept=".mp3,.wav,.flac,.ogg,.m4a"
                  >
                    <i class="el-icon-upload"></i>
                    <div class="el-upload__text">
                      <el-button type="primary" icon="el-icon-upload">选择音频文件</el-button>
                    </div>
                  </el-upload>
                </div>
              </div>

              <!-- 分析设置区域 -->
              <div class="analysis-section">
                <h3 class="section-title">分析设置</h3>
                <div class="analysis-content">
                  <div class="input-area">
                    <el-input
                      type="textarea"
                      :rows="5"
                      placeholder="输入分析说明（可选）：例如，需要识别的关键词、人物名称、中心思想等"
                      v-model="analysisDescription"
                    ></el-input>
                  </div>
                  <div class="analysis-options">
                    <div class="option-group">
                      <div class="option-label">所有属性</div>
                      <el-select v-model="selectedProperty" placeholder="请选择" class="option-select">
                        <el-option label="全部" value="all"></el-option>
                        <el-option label="语音" value="speech"></el-option>
                        <el-option label="情感" value="emotion"></el-option>
                        <el-option label="关键词" value="keyword"></el-option>
                      </el-select>
                    </div>
                    <div class="option-group">
                      <div class="option-label">所有类型</div>
                      <el-select v-model="selectedType" placeholder="请选择" class="option-select">
                        <el-option label="全部" value="all"></el-option>
                        <el-option label="会议" value="meeting"></el-option>
                        <el-option label="讲座" value="lecture"></el-option>
                        <el-option label="访谈" value="interview"></el-option>
                      </el-select>
                    </div>
                  </div>
                  <div class="analysis-types">
                    <h4>分析类型</h4>
                    <div class="checkbox-group">
                      <el-checkbox v-model="analysisTypes.speech">语音分析</el-checkbox>
                      <el-checkbox v-model="analysisTypes.emotion">情感分析</el-checkbox>
                      <el-checkbox v-model="analysisTypes.keyword">关键词提取</el-checkbox>
                      <el-checkbox v-model="analysisTypes.content">内容摘要</el-checkbox>
                    </div>
                  </div>
                  <div class="analysis-button">
                    <el-button type="primary" @click="startAnalysis" :disabled="!canAnalyze" :loading="analyzing">
                      开始分析
                    </el-button>
                  </div>
                </div>
              </div>

              <!-- 分析结果区域 -->
              <div class="result-section">
                <h3 class="section-title">分析结果</h3>
                <div class="result-tabs" v-if="showResults">
                  <el-tabs v-model="activeTab" type="card">
                    <el-tab-pane label="文字记录" name="text">
                      <div class="result-content text-result">
                        <p v-if="!analysisResults.text">正在处理文字记录...</p>
                        <div v-else v-html="analysisResults.text"></div>
                      </div>
                    </el-tab-pane>
                    <el-tab-pane label="情感分析" name="emotion">
                      <div class="result-content emotion-result">
                        <p v-if="!analysisResults.emotion">正在处理情感分析...</p>
                        <div v-else v-html="analysisResults.emotion"></div>
                      </div>
                    </el-tab-pane>
                    <el-tab-pane label="关键词提取" name="keyword">
                      <div class="result-content keyword-result">
                        <p v-if="!analysisResults.keyword">正在处理关键词提取...</p>
                        <div v-else class="keyword-cloud">
                          <div v-for="(keyword, index) in analysisResults.keywords" :key="index"
                               class="keyword-item" :style="{ fontSize: (keyword.weight * 16 + 12) + 'px' }">
                            {{ keyword.text }}
                          </div>
                        </div>
                      </div>
                    </el-tab-pane>
                    <el-tab-pane label="主题分析" name="theme">
                      <div class="result-content theme-result">
                        <p v-if="!analysisResults.theme">正在处理主题分析...</p>
                        <div v-else v-html="analysisResults.theme"></div>
                      </div>
                    </el-tab-pane>
                    <el-tab-pane label="可视化结果" name="visual">
                      <div class="result-content visual-result">
                        <p v-if="!analysisResults.visual">正在生成可视化结果...</p>
                        <div v-else class="visual-container">
                          <img :src="analysisResults.visual" alt="可视化结果" />
                        </div>
                      </div>
                    </el-tab-pane>
                  </el-tabs>
                </div>
                <div class="result-placeholder" v-if="!showResults">
                  <div class="placeholder-content">
                    <i class="el-icon-data-analysis" style="font-size: 48px; color: #68d8fe; margin-bottom: 20px;"></i>
                    <p>请上传音频文件并点击"开始分析"按钮查看分析结果</p>
                  </div>
                </div>
              </div>

              <!-- 右侧功能介绍 -->
              <div class="feature-sidebar">
                <div class="feature-card">
                  <h4>概述介绍</h4>
                  <p>音频分析系统可以对上传的音频文件进行智能分析，提取文字内容、情感倾向、关键词等信息，辅助用户快速理解音频内容。</p>
                </div>
                <div class="feature-card">
                  <h4>分析的内容</h4>
                  <p>系统可以分析音频中的语音内容、情感倾向、关键词提取和主题分析，帮助用户获取音频的核心信息和情感特征。</p>
                </div>
                <div class="feature-card">
                  <h4>数据安全说明</h4>
                  <p>所有上传的音频文件和分析结果都经过加密存储，确保数据安全。用户可以随时删除已上传的音频文件和分析结果。</p>
                </div>
              </div>
            </div>
          </dv-border-box-12>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import drawMixin from "../utils/drawMixin"

export default {
  mixins: [drawMixin],
  name: 'AudioDataCategory',
  data() {
    return {
      // 上传相关
      uploadedFile: null,
      uploadProgress: 0,

      // 分析相关
      analysisDescription: '',
      selectedProperty: 'all',
      selectedType: 'all',
      analysisTypes: {
        speech: true,
        emotion: true,
        keyword: true,
        content: false
      },
      analyzing: false,

      // 结果相关
      showResults: false,
      activeTab: 'text',
      analysisResults: {
        text: '',
        emotion: '',
        keyword: '',
        theme: '',
        visual: '',
        keywords: []
      }
    }
  },
  computed: {
    canAnalyze() {
      return this.uploadedFile &&
             (this.analysisTypes.speech ||
              this.analysisTypes.emotion ||
              this.analysisTypes.keyword ||
              this.analysisTypes.content);
    }
  },
  methods: {
    goBack() {
      this.$router.push('/');
    },
    refreshData() {
      this.resetAnalysis();
      this.$message.success('数据已刷新');
    },
    resetAnalysis() {
      this.uploadedFile = null;
      this.analysisDescription = '';
      this.showResults = false;
      this.analysisResults = {
        text: '',
        emotion: '',
        keyword: '',
        theme: '',
        visual: '',
        keywords: []
      };
    },
    beforeUpload(file) {
      const isAudio = file.type.startsWith('audio/');
      const isLt100M = file.size / 1024 / 1024 < 100;

      if (!isAudio) {
        this.$message.error('只能上传音频文件!');
        return false;
      }
      if (!isLt100M) {
        this.$message.error('音频文件大小不能超过 100MB!');
        return false;
      }
      return true;
    },
    handleUpload(options) {
      const { file } = options;
      this.uploadedFile = file;

      // 这里模拟上传过程，实际项目中应该调用API上传文件
      const formData = new FormData();
      formData.append('file', file);

      // 调用后端API上传文件
      // 注意：这里是预留的API调用，实际项目中需要实现后端接口
      // this.$unstructuredapi.uploadAudioFile(formData)
      //   .then(response => {
      //     options.onSuccess(response);
      //   })
      //   .catch(error => {
      //     options.onError(error);
      //   });

      // 模拟上传成功
      setTimeout(() => {
        options.onSuccess({ fileId: 'audio_' + Date.now() });
      }, 1500);
    },
    handleUploadSuccess(response) {
      this.$message.success('音频文件上传成功');
      this.uploadedFile.id = response.fileId;
    },
    handleUploadError() {
      this.$message.error('音频文件上传失败');
      this.uploadedFile = null;
    },
    startAnalysis() {
      if (!this.canAnalyze) return;

      this.analyzing = true;
      this.showResults = true;

      // 构建分析参数 - 注释掉未使用的变量，避免ESLint警告
      // const analysisParams = {
      //   fileId: this.uploadedFile.id,
      //   description: this.analysisDescription,
      //   property: this.selectedProperty,
      //   type: this.selectedType,
      //   analysisTypes: Object.keys(this.analysisTypes).filter(key => this.analysisTypes[key])
      // };

      // 调用后端API进行分析
      // 注意：这里是预留的API调用，实际项目中需要实现后端接口
      // this.$unstructuredapi.analyzeAudioFile({
      //   fileId: this.uploadedFile.id,
      //   description: this.analysisDescription,
      //   property: this.selectedProperty,
      //   type: this.selectedType,
      //   analysisTypes: Object.keys(this.analysisTypes).filter(key => this.analysisTypes[key])
      // })
      //   .then(response => {
      //     this.handleAnalysisResults(response);
      //   })
      //   .catch(error => {
      //     this.$message.error('音频分析失败: ' + error.message);
      //     this.analyzing = false;
      //   });

      // 模拟分析结果
      setTimeout(() => {
        this.handleAnalysisResults(this.getMockAnalysisResults());
      }, 2000);
    },
    handleAnalysisResults(results) {
      this.analysisResults = results;
      this.analyzing = false;
    },
    // 模拟分析结果数据，实际项目中应该从API获取
    getMockAnalysisResults() {
      return {
        text: '123412341234',
        emotion: '整体情感倾向：<span style="color: #67C23A">积极</span><br>情感分布：积极 65%，中性 30%，消极 5%<br>关键情感点：项目进度讨论时情绪较为紧张，abcde时情绪明显转为积极。',
        keyword: '关键词分析结果',
        theme: '主要议题：1112<br>次要议题：2223、4445<br>核心关注点：6666777',
        visual: 'https://via.placeholder.com/800x400?text=Audio+Visualization',
        keywords: [
          { text: '项目进度', weight: 5 },
          { text: '资源支持', weight: 4 },
          { text: '方案', weight: 3.5 },
          { text: '开发', weight: 3 },
          { text: '会议', weight: 2.5 },
          { text: '下周一', weight: 2 },
          { text: '张经理', weight: 1.5 },
          { text: '李总', weight: 1.5 },
          { text: '讨论', weight: 1 },
          { text: '决定', weight: 1 }
        ]
      };
    }
  },
  mounted() {
    // 触发重新计算大屏缩放比例
    setTimeout(() => {
      this.calcRate()
    }, 100)
  }
}
</script>

<style lang="scss" scoped>
@import '../assets/scss/common.scss';

.audio-data-category {
  .module-container {
    height: 100%;
    display: flex;
    flex-direction: column;

    .module-header {
      display: flex;
      align-items: center;
      margin-bottom: 20px;
      justify-content: space-between;

      .header-icon {
        font-size: 24px;
        color: #68d8fe;
        margin-right: 10px;
      }

      .header-title {
        font-size: 22px;
        font-weight: bold;
        color: #68d8fe;
      }

      .header-actions {
        display: flex;
        gap: 10px;
      }
    }

    .module-content {
      flex: 1;

      .content-box {
        height: 100%;
        padding: 20px;
      }

      .content-wrapper {
        height: 100%;
        background-color: rgba(19, 25, 47, 0.6);
        padding: 20px;
        display: grid;
        grid-template-columns: 1fr 2fr;
        grid-template-rows: auto auto 1fr;
        grid-template-areas:
          "upload results"
          "analysis results"
          "sidebar results";
        gap: 20px;
        color: #d3d6dd;

        .section-title {
          font-size: 18px;
          font-weight: bold;
          color: #68d8fe;
          margin-bottom: 15px;
          border-bottom: 1px solid rgba(104, 216, 254, 0.3);
          padding-bottom: 8px;
        }

        .upload-section {
          grid-area: upload;
          background-color: rgba(15, 19, 37, 0.8);
          border-radius: 8px;
          padding: 15px;
          border: 1px solid rgba(104, 216, 254, 0.3);

          .upload-content {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 150px;

            .upload-icon {
              display: flex;
              flex-direction: column;
              align-items: center;
              margin-right: 30px;

              .icon-large {
                font-size: 48px;
                color: #68d8fe;
                margin-bottom: 10px;
              }

              .upload-text {
                text-align: center;

                .upload-tip {
                  font-size: 12px;
                  color: #909399;
                  margin-top: 5px;
                }
              }
            }

            .upload-area {
              flex: 1;
              display: flex;
              justify-content: center;
            }
          }
        }

        .analysis-section {
          grid-area: analysis;
          background-color: rgba(15, 19, 37, 0.8);
          border-radius: 8px;
          padding: 15px;
          border: 1px solid rgba(104, 216, 254, 0.3);

          .analysis-content {
            display: flex;
            flex-direction: column;
            gap: 15px;

            .input-area {
              width: 100%;
            }

            .analysis-options {
              display: flex;
              gap: 20px;

              .option-group {
                display: flex;
                align-items: center;
                gap: 10px;

                .option-label {
                  white-space: nowrap;
                }

                .option-select {
                  width: 120px;
                }
              }
            }

            .analysis-types {
              h4 {
                font-size: 16px;
                margin-bottom: 10px;
                color: #68d8fe;
              }

              .checkbox-group {
                display: flex;
                flex-wrap: wrap;
                gap: 20px;
              }
            }

            .analysis-button {
              display: flex;
              justify-content: center;
              margin-top: 10px;
            }
          }
        }

        .result-section {
          grid-area: results;
          background-color: rgba(15, 19, 37, 0.8);
          border-radius: 8px;
          padding: 15px;
          border: 1px solid rgba(104, 216, 254, 0.3);
          overflow: hidden;
          display: flex;
          flex-direction: column;
          height: 100%;

          .result-tabs {
            flex: 1;
            overflow: auto;
            display: flex;
            flex-direction: column;
          }

          .result-content {
            padding: 15px;
            flex: 1;
            overflow-y: auto;

            &.keyword-result {
              .keyword-cloud {
                display: flex;
                flex-wrap: wrap;
                justify-content: center;
                align-items: center;
                gap: 15px;
                padding: 20px;

                .keyword-item {
                  color: #68d8fe;
                  padding: 5px 10px;
                  border-radius: 15px;
                  background-color: rgba(104, 216, 254, 0.1);
                  transition: all 0.3s;

                  &:hover {
                    transform: scale(1.1);
                    background-color: rgba(104, 216, 254, 0.3);
                  }
                }
              }
            }

            &.visual-result {
              .visual-container {
                display: flex;
                justify-content: center;

                img {
                  max-width: 100%;
                  border-radius: 4px;
                }
              }
            }
          }

          .result-placeholder {
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;

            .placeholder-content {
              text-align: center;
              color: #909399;
            }
          }
        }

        .feature-sidebar {
          grid-area: sidebar;
          display: flex;
          flex-direction: column;
          gap: 15px;

          .feature-card {
            background-color: rgba(15, 19, 37, 0.8);
            border-radius: 8px;
            padding: 15px;
            border: 1px solid rgba(104, 216, 254, 0.3);

            h4 {
              font-size: 16px;
              color: #68d8fe;
              margin-bottom: 10px;
            }

            p {
              font-size: 14px;
              line-height: 1.5;
            }
          }
        }
      }
    }
  }
}

// 覆盖Element UI样式
::v-deep .el-tabs__item {
  color: #d3d6dd;

  &.is-active {
    color: #68d8fe;
  }
}

::v-deep .el-tabs__nav-wrap::after {
  background-color: rgba(104, 216, 254, 0.3);
}

::v-deep .el-tabs__active-bar {
  background-color: #68d8fe;
}

::v-deep .el-checkbox__input.is-checked .el-checkbox__inner {
  background-color: #68d8fe;
  border-color: #68d8fe;
}

::v-deep .el-checkbox__input.is-checked + .el-checkbox__label {
  color: #d3d6dd;
}

::v-deep .el-upload-dragger {
  background-color: rgba(15, 19, 37, 0.5);
  border: 1px dashed rgba(104, 216, 254, 0.5);

  &:hover {
    border-color: #68d8fe;
  }
}

::v-deep .el-textarea__inner {
  background-color: rgba(15, 19, 37, 0.5);
  border: 1px solid rgba(104, 216, 254, 0.3);
  color: #d3d6dd;

  &:focus {
    border-color: #68d8fe;
  }
}

::v-deep .el-select .el-input__inner {
  background-color: rgba(15, 19, 37, 0.5);
  border: 1px solid rgba(104, 216, 254, 0.3);
  color: #d3d6dd;
}

::v-deep .el-select-dropdown {
  background-color: rgba(15, 19, 37, 0.9);
  border: 1px solid rgba(104, 216, 254, 0.3);

  .el-select-dropdown__item {
    color: #d3d6dd;

    &.selected {
      color: #68d8fe;
    }

    &:hover {
      background-color: rgba(104, 216, 254, 0.1);
    }
  }
}
</style>
